import "./index.css";
import "./index.less";
import "./index.scss";

import { useState } from "react";

import reactLogo from "./assets/react.svg";
import * as cssStyles from "./index.module.css";
import * as lessStyles from "./index.module.less";
import * as scssStyles from "./index.module.scss";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank" rel="noreferrer">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Webpack + React</h1>
      <div className="card">
        <button
          //className={styles["title"]}
          onClick={() => setCount((count) => count + 1)}
        >
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <div>
        <h2 className={cssStyles["title"]}>
          this is <span className="descript-h2">css style</span>
        </h2>
        <h3 className={lessStyles["title"]}>
          this is <span className="descript-h3">less style</span>
        </h3>
        <h4 className={scssStyles["title"]}>
          this is <span className="descript-h4">sass style</span>
        </h4>
      </div>
    </div>
  );
}

export default App;
